<script setup lang="ts">
import Module from "./module";
import ProcessBar from "./ProcessBar";
import zu34 from "./assets/组34.svg";
import zu33 from "./assets/组33.svg";
import zu35 from "./assets/组35.svg";

const imglist = [zu34, zu33, zu35];
</script>

<template>
	<Module class="h-1/3 w-full box-border p-2" title="设备状态统计">
		<div class="w-full h-full">
			<div class="w-full h-1/3 flex flex-row" v-for="i in [1, 2, 3]" :key="i">
				<div class="h-full p-5 box-border"><img :src="imglist[i - 1]" alt="" class="h-full" /></div>
				<div class="w-full flex flex-col justify-center items-center">
					<div
						class="flex-row flex w-full justify-between"
						style="background: linear-gradient(90deg, #0d54f947 0%, #0d54f900 100%)"
					>
						<div class="flex flex-row">
							<div class="mx-2 h-[20px] leading-[20px] text-sm">在线</div>
							<div class="mx-2 h-[20px] leading-[20px] text-base">23</div>
						</div>
						<div class="flex flex-row">
							<div class="mx-2 h-[20px] leading-[20px] text-sm">占比</div>
							<div class="mx-2 h-[20px] leading-[20px] text-base">78.6%</div>
						</div>
					</div>
					<div class="process w-full">
						<process-bar class="w-full h-[15px]" :rate="100 - 20 * i" />
					</div>
				</div>
			</div>
		</div>
	</Module>
</template>

<style scoped lang="scss"></style>
